<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单标签 action是表单提交到服务器的地址 get请求是获取数据，post请求是保存数据 -->
    <form action="test.php" method="post">
        <!-- 明文输入框 -->
        用户: <input type="text">
        <!-- 暗纹输入框  br标签是强制换行-->
        密码: <input type="password"><br>
        <!--单选按钮  -->
        性别:
        <!-- <label for="list">男：</label> -->
        <label>
            男：<input type="radio" name="gender" value="male" id="">
            女：<input type="radio" name="gender" value="female" id="">

        </label><br>
        <!-- 复选框 -->
        爱好：
      篮球：<input type="checkbox" name="hobbies" id="baskettall">
      足球：<input type="checkbox" name="hobbies" id="footboll">
      游泳：<input type="checkbox" name="hobbies" id="swming"><br>
      <!-- 下拉框 -->
       <select name="city" id="">
        <!-- 下拉选项  optgroup下拉分组-->
         <optgroup label="一线城市">
            <option value="lanzhou">兰州</option>
         <option value="tianshui">天水</option>
         <option value="wuwei">武威</option>
         </optgroup>
         
         <optgroup label="二线城市">
            <option value="shanghai">上海</option>
         <option value="beijing">北京</option>
         <option value="xian">西安</option>
         </optgroup>
    </select><br>
    <!-- 多行文本框  rows 行数 cols列数-->
     <textarea ></textarea>
    <!-- 进度条 -->
     <progress value="70" max="100"></progress>
     <!-- 滑块 -->
      <input type="range" min="0" max="10" step="1">
      <!-- 时间日期选择器 -->
       <input type="datetime-local">
       <!-- 日期选择器 -->
        <input type="date">
        <!-- 颜色拾取器 -->
         <input type="color">
         <!-- 普通按钮 -->
        <input type="button" value="提交">
    </form>
</body>

</html>